<template>
    <div class="table-page">
        <div class="table-operation-box">
            <el-button
                type="primary"
                style="margin-bottom: 2em"
                icon="el-icon-plus"
                @click="clickAdd('新增')"
                >添加
            </el-button>
            <el-button
                type="danger"
                style="margin-bottom: 2em"
                icon="el-icon-delete"
                :disabled="selectDisable"
                @click="
                    tableDelete(
                        '/user/cu/agent/level/deleted-list',
                        {
                            ids: tableSelect
                        },
                        true
                    )
                "
                >批量删除
            </el-button>
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                @selection-change="tableSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>

                <el-table-column
                    prop="name"
                    label="名称"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="icon"
                    label="图标"
                    width="200"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-avatar
                            :src="
                                coverImage(scope.row.icon) +
                                    '?x-oss-process=image/resize,m_fill,h_110,w_110'
                            "
                        >
                        </el-avatar>
                    </template>
                </el-table-column>
                <el-table-column prop="discount" label="折扣"></el-table-column>
                <el-table-column label="操作" width="300" align="center">
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            class="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="clickSimpleEdit(scope.row, '编辑')"
                            >编辑
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            type="text"
                            size="mini"
                            class="danger"
                            icon="el-icon-delete"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/user/cu/agent/level/delete',
                                    {
                                        id: scope.row.id
                                    },
                                    true
                                )
                            "
                            >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>

        <el-dialog
            :title="dialogFormTitle"
            :visible.sync="dialogFormVisible"
            :before-close="dialogClose"
            custom-class="two-dialog"
        >
            <el-form
                ref="dataForm"
                :model="dataForm"
                label-width="8em"
                :rules="dataFormRule"
                class="table-edit-from "
            >
                <el-form-item label="名称" prop="name">
                    <el-input v-model="dataForm.name"></el-input>
                </el-form-item>
                <el-form-item label="折扣" prop="discount">
                    <el-input v-model="dataForm.discount"></el-input>
                </el-form-item>
                <el-form-item label="图标" prop="icon" class="school-logo">
                    <el-upload
                        class="logo-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        accept=".jpg,.png,.jpeg"
                        :auto-upload="false"
                        :on-change="logoChange"
                    >
                        <img
                            v-if="dataForm.icon"
                            :src="coverImage(dataForm.icon)"
                            class="logo-img"
                        />
                        <i v-else class="el-icon-plus logo-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button :loading="submitFlag" @click="dialogClose"
                    >取 消</el-button
                >
                <el-button
                    :loading="submitFlag"
                    type="primary"
                    @click="formDataSave('/user/cu/agent/level/update')"
                    >保 存</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { TablePage } from "@/layout/mixin/iVue.js";
import { mapState } from "vuex";
import { get, put, post } from "@/api/request";
import { ossUpload } from "@/utils/file";

export default {
    name: "AgentLevelList",
    components: {},
    mixins: [TablePage],
    data() {
        return {
            queryData: {
                name: "",
                code: "",
                enable: null
            },
            initAddForm: {
                name: null,
                code: null,
                icon: null,
                discount: null
            },
            oldCode: null,
            base64Logo: null,
            dataFormRule: {
                name: [
                    {
                        required: true,
                        message: "请输入名称",
                        trigger: "blur"
                    }
                ],
                code: [
                    {
                        required: true,
                        message: "请输入编码",
                        trigger: "blur"
                    }
                ],
                icon: [
                    {
                        required: false,
                        message: "请上传图片 ",
                        trigger: "blur"
                    }
                ],
                discount: [
                    {
                        required: true,
                        trigger: "blur",
                        validator: (rule, value, callback) => {
                            if (!value) {
                                return callback(new Error("折扣不能为空"));
                            }
                            setTimeout(() => {
                                if (value > 1) {
                                    callback(new Error("不能大于1"));
                                } else {
                                    callback();
                                }
                            }, 1000);
                        }
                    }
                ]
            }
        };
    },
    computed: {
        ...mapState({})
    },
    watch: {},
    created() {},
    mounted() {},
    methods: {
        search(queryData) {
            this.loadTable("/user/cu/agent/level/page", queryData);
        },
        logoChange(file, fileList) {
            if (fileList.length > 1) {
                fileList.splice(0, 1);
            }
            const elFile = fileList[0];
            file = fileList[0].raw;
            let imgReaderl = new FileReader();
            imgReaderl.onload = evt => {
                this.base64Logo = evt.target.result;
            };
            imgReaderl.readAsDataURL(file);
            ossUpload("cdn", file.name, file, p => {
                elFile.percentage = p * 100;
                elFile.status = "uploading";
            }).then(result => {
                this.dataForm.icon = result;
                elFile.status = "done";
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.school-logo {
    .logo-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 108px;
        height: 108px;
        line-height: 108px;
        text-align: center;
    }

    .logo-img {
        width: 108px;
        height: 108px;
        display: block;
    }
}

.table-edit-from {
    .address-select {
        width: 8em;
        margin-right: 2em;
    }
}
</style>
<style>
.school-logo .logo-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.school-logo .logo-uploader .el-upload:hover {
    border-color: #409eff;
}
</style>
